import React, { Component } from 'react'
// import '/detail.css'
// import '/baguetteBox.css'
import Pl from '../plugin/Pl'

export default class Desc extends Component {

    state = {
        containerWrapper: "",
        container: "",
        openButton: "",
        closeButton: "",
        isFirst: false,
        isMore: false
    }

    video_click = (des) => {
        document.getElementById('video_qt').style.display = 'block';
        document.getElementById('video_bj').style.display = 'block'
        document.getElementById("video_qt").innerHTML = '<iframe src="' + des + '" frameborder="0" width="100%" height="100%" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>';
        document.documentElement.style.overflowY = 'hidden';
        document.body.style.overflowY = 'scroll';
    }
    video_off = () => {
        document.getElementById('video_qt').style.display = 'none';
        document.getElementById('video_bj').style.display = 'none'
        document.getElementById("video_qt").innerHTML = '';
        document.documentElement.style.overflowY = '';
        document.body.style.overflowY = '';
    }
    onOpen = () => {
        let wrapper = this.state.containerWrapper;
        wrapper.style.maxHeight = "99999px";

        let open = this.state.openButton;
        open.style.visibility = "hidden";

        let close = this.state.closeButton;
        close.style.visibility = "visible";

        this.setState({
            containerWrapper: wrapper,
            openButton: open,
            closeButton: close
        })


        // this.state.containerWrapper.style.maxHeight ='99999px'//这里要设置一个足够大的值比如9999px
        // this.state.openButton.style.visibility='hidden'
        // this.state.closeButton.style.visibility='visible'
    }
    onClose = () => {
        let wrapper = this.state.containerWrapper;
        wrapper.style.maxHeight = "500px";

        let open = this.state.openButton;
        open.style.visibility = "visible";

        let close = this.state.closeButton;
        close.style.visibility = "hidden";

        this.setState({
            containerWrapper: wrapper,
            openButton: open,
            closeButton: close
        })

    }
    //组件挂载完成时候触发的生命周期函数
    componentDidMount() {

        if (document.getElementById("container").offsetHeight > document.getElementById('list').offsetHeight) {
            document.getElementById("open").style.visibility = 'visible'
        } else {
            document.getElementById("open").style.visibility = 'hidden'
            document.getElementById("open").style.visibility = 'hidden'
        }


        if (!this.state.isFirst) {
            var container = document.getElementById("container") //container container
            var list = document.getElementById('list') //list containerWrapper
            var open = document.getElementById('open') //open openButton
            var close = document.getElementById('close') //close closeButton

            this.setState({
                containerWrapper: list,
                container: container,
                openButton: open,
                closeButton: close,
                isFirst: true,
                isMore: container.offsetHeight > list.offsetHeight
            })
        }



        //评分

        var iScore = 0;
        var iStar = 0;
        var oStar = document.getElementById("star");
        var aLi = oStar.getElementsByTagName("li");
        var oUl = oStar.getElementsByTagName("ul")[0];
        // var oSpan = oStar.getElementsByTagName("span")[1];
        var oSpan = document.getElementById("pf_msg");
        var oP = oStar.getElementsByTagName("p")[0];
        var i = iScore = iStar = 0;
        var aMsg = [
            "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
            "不满意|部分有破损，与卖家描述的不符，不满意",
            "一般|质量一般，没有卖家描述的那么好",
            "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
            "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
        ]
        for (i = 1; i <= aLi.length; i++) {
            aLi[i - 1].index = i;

            //鼠标移过显示分数
            aLi[i - 1].onmouseover = function () {
                fnPoint(this.index);
                //浮动层显示
                oP.style.display = "block";
                //计算浮动层位置
                oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
                //匹配浮动层文字内容
                oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em>" + aMsg[this.index - 1].match(/\|(.+)/)[1]
            };

            //鼠标离开后恢复上次评分
            aLi[i - 1].onmouseout = function () {
                fnPoint();
                //关闭浮动层
                oP.style.display = "none"
            };

            //点击后进行评分处理
            aLi[i - 1].onclick = function () {
                iStar = this.index;
                oP.style.display = "none";
                oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")"
            }
        }
        //评分处理
        function fnPoint(iArg) {
            //分数赋值
            iScore = iArg || iStar;
            for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";
        }
    }
    render() {
        return (
            <div id="pic_toggle">
                <div className="container clearfix mt20">
                    <div className="clearfix">
                        <div className="card">
                            <div id="fen_bj"></div>
                            <div className="novelinfo">
                                <div className="novelinfo-l">
                                    <ul>
                                        <img src="/58b5211035a1c6bf2a6df94f4199039b.jpg" alt="孟星魂人物Pose优化包" />
                                    </ul>
                                </div>
                                <div className="novelinfo-r">
                                    <h1>孟星魂人物Pose优化包</h1>
                                    <div className="fen" id="showpf">
                                        <em>2.7分</em>
                                        <p><em>44</em>人</p>
                                    </div>
                                    <ul>
                                        <li>语言：繁体中文 <br />作者：<a href="/writer/Zack.html" target="blank">Zack</a> <br />大小：2 MB <br />环境：Meteor 1.08.16 </li>
                                        <li>热度：712 ℃ <br />类型：.7z <br />日期：2019-05-18 </li>
                                        <li className="pingfen">
                                            <div id="star">
                                                <span style={{ float: "left" }}>评分：</span>
                                                <ul>
                                                    <li><a href="javascript:void(0);">1</a></li>
                                                    <li><a href="javascript:void(0);">2</a></li>
                                                    <li><a href="javascript:void(0);">3</a></li>
                                                    <li><a href="javascript:void(0);">4</a></li>
                                                    <li><a href="javascript:void(0);">5</a></li>
                                                </ul>
                                                <span id="pf_msg" style={{ fontSize: "11px" }}></span>
                                                <p style={{ display: "none", left: "108px" }}><em><b>5</b> 分 非常满意</em>质量非常好，与卖家描述的完全一致，非常满意</p>
                                            </div>
                                            {/* <em>喜欢就打个分吧！</em> */}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        {/* 图片开始 */}
                        <div className="card mt40">
                            <div className="tj">
                                <div className="bt"><h1>图片</h1></div>
                                <section className="gallery zoomImgBox">
                                    <span>
                                        <img class="zoomImg" src="/1.jpg" alt="图像增强补丁6.4.7" />
                                    </span>
                                    <span>
                                        <img class="zoomImg" src="/1.jpg" alt="图像增强补丁6.4.7" />
                                    </span>
                                    <span>
                                        <img class="zoomImg" src="/1.jpg" alt="图像增强补丁6.4.7" />
                                    </span>
                                </section>
                            </div>
                        </div>
                        {/* 图片结束 */}
                        <div className="card mt40">
                            <div className="video-box">
                                <div className="bt">
                                    <h1>视频</h1>
                                </div>
                                <div className="video">
                                    <a href="javascript:void(0)" className="xinghai-span" title="孟星魂人物Pose优化包1" onClick={() => { return this.video_click('/孟星魂人物Pose優化包.mp4') }}><i>孟星魂人物Pose优化包1</i></a>
                                </div>
                            </div>
                        </div>
                        <div className="card mt40">
                            <div className="bt">
                                <h1>详情</h1>
                            </div>
                            <div id="list">
                                <div className="body novelintro" id="container">
                                    <div dir="ltr" style={{ fontFamily: "&quot;lucida Grande&quot;, Verdana", fontSize: "14px" }}>
                                        <span className="gmail-m_-4787943167980542597gmail-m_-4168271242686372535gmail-im">把以下文件放进对应文件夹（温馨提示：覆盖文件前请事先备份原始档案群，进入游戏后，选择孟星魂，然后发动指虎大绝<span lang="EN-US">Pose 421</span>，即见效果<span lang="EN-US">&nbsp;:&nbsp;<br /> <br /> 1</span>）<span lang="EN-US">P0.POS -&gt; pmodel</span><span lang="EN-US"><br /> 2</span>）<span lang="EN-US">Meteor.RES -&gt;&nbsp;</span>摆放流星主程式的文件夹<span lang="EN-US"><br /> 3</span>）<span lang="EN-US">effect (MASM Listing) -&gt; SFX</span><span lang="EN-US"><br /> </span></span>
                                    </div>
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                        fhadskhfhfhahfahhgg<br />
                                </div>
                            </div>
                            <div id="open" onClick={this.onOpen} style={{ visibility: "hidden" }}>
                                展开全文…
                                </div>
                            <div id="close" onClick={this.onClose} style={{ visibility: "hidden" }}>
                                收起全文…
                    </div>
                        </div>
                        <div className="card mt40" id="down">
                            <div className="bt">
                                <h1>下载</h1>
                            </div>
                            <div className="d_list">
                                <a href="javascript:void(0)" title="孟星魂人物Pose优化包 - 城通网盘分流下载">城通网盘分流下载<i></i></a>
                                <i><i></i>孟星魂人物Pose优化包.7z</i>
                                <br />
                                <a href="javascript:void(0)" title="孟星魂人物Pose优化包 - 本地下载">本地下载<i></i></a>
                            </div>
                        </div>
                        {/* 评论开始 */}
                        <Pl />
                        {/* 评论结束 */}
                    </div>
                </div>
                <div className="card mt40">
                    <div className="body">
                        <div className="bt">
                            <h1>友情链接</h1>
                        </div>
                        <div className="links">
                            <ul>
                                <li><a href="https://www.lxres.com" target="blank" title="流星资源网"><img alt="none" src="/logo.gif" name="流星资源网" /></a></li>
                                <li><a href="http://tieba.baidu.com/f?kw=%E6%B5%81%E6%98%9F%E8%9D%B4%E8%9D%B6%E5%89%91&amp;fr=index" target="blank" title="流星蝴蝶剑吧"><img alt="none" src="/bdlx.gif" name="流星蝴蝶剑吧" /></a></li>
                                <li><a href="http://www.yfzz.net/" target="blank" title="隐龙轩"><img alt="none" src="/yfzz.gif" name="隐龙轩" /></a></li>
                                <li><a href="http://www.yimenonline.com/forum.php" target="blank" title="易武会友"><img alt="none" src="/yimenonline.png" name="易武会友" /></a></li>
                                <li><a href="http://mp.weixin.qq.com/s?__biz=MzA5NTcxNTA4Ng==&amp;mid=2651090862&amp;idx=2&amp;sn=69742dbb004af0a8ff2b434089005e83&amp;chksm=8b4be5cfbc3c6cd92ae71c88667b7f483b0b15e2a261e2dff54052bc2d6c63a3c7b3e3090409#rd" target="blank" title="流星公众号"><img alt="none" src="/lxhdj2015.gif" name="流星公众号" /></a></li>
                                <li><a href="http://bajian.name/" target="blank" title="流星部落格"><img alt="none" src="/bajian.gif" name="流星部落格" /></a></li>
                                <li><a href="http://www.lxhdj.com/" target="blank" title="流星蝴蝶剑下载站"><img alt="none" src="/lxhdj.gif" name="流星蝴蝶剑下载站" /></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="p-down">
                    <a href="#down" title="下载"><i className="pticon pticon-download"></i></a>
                </div>
                <div className="p-pinglun">
                    <a href="#pl" title="评论"><i className="pticon pticon-comments"></i></a>
                </div>
                <div className="p-list">
                    <a href="#list" title="详情"><i className="pticon pticon-list"></i></a>
                </div>

                <div style={{ display: "none" }}>
                    xx
                </div>
                <div id="video_qt"></div>
                <div id="video_bj" onClick={this.video_off}></div>
            </div>
        )


    }
}
